import Navbar from '../components/Navbar'
import {
    Button, List, Dialog, Form, Input, Toast
} from 'antd-mobile'
import "../style/set.scss"
import { bindusername, updatePassword } from '../apis/user'
import { useNavigate } from 'react-router-dom'
import { CloseOutline } from 'antd-mobile-icons'
export default function Set() {
    const navigate = useNavigate()
    let onFinish = async (v: any) => {
        Dialog.clear()
        let res = updatePassword(localStorage.getItem("userid"), v.oldpassword, v.newpassword)
        Toast.show({
            icon: 'success',
            content: '修改成功',
        })
        console.log(res);

        navigate("/login")

    }

    let usrename = async (v: any) => {
        let res: any = await bindusername(localStorage.getItem("userid"), v.username)
        if (res.code == "200") Toast.show({
            icon: 'success',
            content: '修改成功',
        })
        Dialog.clear()
    }
    return (
        <div className='set'>
            <Navbar title="设置"/>

            <List>
                <List.Item onClick={() => {
                    Dialog.confirm({
                        header: (

                            <CloseOutline
                                onClick={() => Dialog.clear()}
                                style={{
                                    fontSize: 26,
                                    color: '#ccc',
                                    position: "fixed",
                                    right: "10px",
                                    top: "10px"
                                }}
                            />
                        ),
                        title: '绑定用户名',
                        content: (
                            <>
                                <Form onFinish={(v) => usrename(v)}
                                    footer={
                                        <Button block type='submit' color='primary' size="middle">
                                            提交
                                        </Button>
                                    }
                                >
                                    <Form.Item
                                        name='username'
                                        label='用户名'
                                        rules={[{ required: true }]}
                                    >
                                        <Input placeholder='请输入用户名' />
                                    </Form.Item>

                                </Form>
                            </>
                        ),
                    })

                }}>
                    绑定用户名
                </List.Item>

                <List.Item onClick={() => {
                    Dialog.confirm({
                        header: (

                            <CloseOutline
                                onClick={() => Dialog.clear()}
                                style={{
                                    fontSize: 26,
                                    color: '#ccc',
                                    position: "fixed",
                                    right: "10px",
                                    top: "10px"
                                }}
                            />
                        ),
                        title: '修改密码',
                        content: (
                            <>
                                <Form onFinish={onFinish}
                                    footer={
                                        <Button block type='submit' color='primary' size='large'>
                                            提交
                                        </Button>
                                    }
                                >
                                    <Form.Item
                                        name='oldpassword'
                                        label='旧密码'
                                        rules={[{ required: true }]}
                                    >
                                        <Input placeholder='请输入旧密码' />
                                    </Form.Item>
                                    <Form.Item
                                        name='newpassword'
                                        label='新密码'
                                        rules={[{ required: true }]}
                                    >
                                        <Input placeholder='请输入新密码' />
                                    </Form.Item>
                                </Form>
                            </>
                        ),
                    })
                }}>
                    修改密码
                </List.Item>
            </List >

            <Button block color='danger' shape='rounded' style={{ marginTop: "40px", height: "44px" }}>退出登录</Button>
        </div >
    )
}
